<template>
  <view class="road-container">
    <!-- 分类标签栏 -->
    <TabNav :tabs="categories" displayField="category" @custom-click="(tab) => getCurrentRoutes(tab.category)" />
    <view class="route-content">
      <template v-if="isLoading">
        <view class="loading">加载中...</view>
      </template>
      <template v-else-if="currentRoutes.length > 0">
        <navigator class="route-card" v-for="(route,index) in currentRoutes" :key="index" :url="`/subPackages/road_detail/road_detail?id=${route.id}`">
          <h5 class="card-title">
            {{route.category}}
            {{route.label}}
            {{ route.title }}
          </h5>
          <view class="card-desc">{{ allContentText[index] }}</view>
          <view class="card-footer">
            <view class="card-tags">
              <text class="tag">{{ route.category }}</text>
            </view>
            <view class="card-views">
              <image class="view-icon" src="/static/icons/view.png"></image>
              <text>{{ route.views }}</text>
            </view>
          </view>
        </navigator>
      </template>
      <template v-else>
        <no-data message="暂无路线数据" />
      </template>
    </view>
  </view>
</template>

<script setup>
  import TabNav from '@/components/TabNav.vue';
  import NoData from '@/components/no-data.vue';
  import { ref, onMounted, watchEffect } from 'vue';
  import { marked } from 'marked';
  
  // 加载状态
  const isLoading = ref(false);
  
  onMounted(() => {
    getCategories()
  })
  
  // 分类导航数据
  const categories = ref([]);
  const getCategories = async () => {
    isLoading.value = true;
    try {
      const res = await uni.$http.get('/roadmap/all-category')
      if (res.data && res.data.data && res.data.data.length > 0) {
        categories.value = res.data.data
        currentCategory.value = categories.value[0].category
        await getCurrentRoutes(currentCategory.value);
      } else {
        categories.value = [];
      }
    } catch (error) {
      console.error('获取分类数据失败:', error);
      categories.value = [];
    } finally {
      isLoading.value = false;
    }
  }
  
  // 当前选中的分类
  const currentCategory = ref('');
  // 当前刷题路线数据示例
  const currentRoutes = ref([]);
  const getCurrentRoutes = async (category) => {
    isLoading.value = true;
    try {
      const res = await uni.$http.get(`/roadmap/all-essay?category=${category}`);
      if (res.data && res.data.data) {
        currentRoutes.value = res.data.data;
      } else {
        currentRoutes.value = [];
      }
    } catch (error) {
      console.error('获取路线数据失败:', error);
      currentRoutes.value = [];
    } finally {
      isLoading.value = false;
    }
  }
  
  // 定义一个数组来存储每个内容的纯文本
  const allContentText = ref([]);
  
  // 使用正则表达式去除 HTML 标签
  function stripHtml(html) {
    return html.replace(/<[^>]*>/g, '');
  }
  
  watchEffect(() => {
    allContentText.value = [];
    currentRoutes.value.forEach(item => {
      const html = marked(item.content || '');
      const text = stripHtml(html);
      allContentText.value.push(text);
    });
  });
</script>

<style lang="scss">
.road-container {
  height: 100vh;
  
  .loading {
    text-align: center;
    padding: 40rpx;
    color: #999;
  }
  
  .route-content{
    margin-top: 30rpx;
    padding: 0 20rpx;
    padding-bottom: 30rpx;
    min-height: 300rpx;
    
    .route-card {
      display: flex;
      flex-direction: column;
      height: 170rpx;
      background-color: white;
      border-radius: 10rpx;
      padding: 10rpx 30rpx;
      margin-bottom: 20rpx;
      .card-title {
        margin-top: 10rpx;
        font-size: 30rpx;
        font-weight: 800;
        margin-bottom: 10rpx;
      }
      .card-desc {
        display: -webkit-box;
        color: #c9c9c9;
        font-size: 25rpx;
        color: #333;
        -webkit-line-clamp: 2;
        -webkit-box-orient: vertical;
        text-overflow: ellipsis;
        overflow: hidden;
      }
      .card-footer{
        display: flex;
        justify-content: space-between;
        margin-top: 10rpx;
        color: #a7a7a7;
        .card-tags {
          .tag {
            font-size: 20rpx;
            background-color: #ededed;
            padding: 5rpx 15rpx;
            border-radius: 3rpx;
            margin-right: 20rpx;
          }
        }
        .card-views {
          display: flex;
          align-items: center;
          font-size: 25rpx;
          image {
            width: 24rpx;
            height: 24rpx;
            margin-right: 5rpx;
          }
        }
      }
    }
  }
}
</style>

